<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品筛选</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        section {
            width: 1200px;
            border: 1px solid #aaa;
        }
        
        div {
            border-bottom: 1px dashed #ccc;
            display: flex;
        }
        
        li,
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        p {
            margin: 0;
            padding: 3px;
            width: 100px;
            text-align: right;
            font-size: 12px;
            line-height: 35px;
        }
        
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        
        li {
            margin: 10px;
            padding: 3px;
            cursor: pointer;
            color: #2050A9;
            font-size: 12px;
        }
        
        .bgc {
            background-color: red;
            color: #fff;
        }
        
        .sec7 li {
            border: 1px solid orange;
            color: #000;
            display: none;
        }
        
        .sec7 p {
            margin: 0;
            padding: 0;
        }
        
        .sec7 ul li:hover span:nth-child(2){
            color: orange;
        }
        
        #clear {
            width: 80px;
            color: red;
            display: none;
        }
        
        #clear:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <section>
        <div class="sec">
            <p>品牌:</p>
            <ul>
                <li>苹果</li>
                <li>小米</li>
                <li>华为</li>
                <li>联想</li>
                <li>中兴</li>
                <li>三星</li>
                <li>魅族</li>
                <li>酷派</li>
                <li>诺基亚</li>
                <li>锤子科技</li>
                <li>索尼移动</li>
                <li>360</li>
                <li>HTC</li>
                <li>黑莓</li>
                <li>微软</li>
                <li>多为</li>
                <li>金立</li>
                <li>荣耀</li>
                <li>华硕</li>
                <li>大神</li>
                <li>长虹</li>
                <li>酷比</li>
                <li>天语</li>
                <li>康佳</li>
                <li>OPPO</li>
                <li>VIVO</li>
                <li>海尔</li>
            </ul>
        </div>
        <div class="sec">
            <p>价格:</p>
            <ul>
                <li>500元以下</li>
                <li>500-1000元</li>
                <li>1000-1500元</li>
                <li>1500-2000元</li>
                <li>2000-3000元</li>
                <li>3000-4000元</li>
                <li>4000元以上</li>
            </ul>
        </div>
        <div class="sec">
            <p>主屏幕尺寸:</p>
            <ul>
                <li>6.0英寸以上</li>
                <li>5.5-6.0英寸</li>
                <li>5.0-5.5英寸</li>
                <li>4.5-5.0英寸</li>
                <li>4.0-4.5英寸</li>
                <li>4.0英寸以下</li>
            </ul>
        </div>
        <div class="sec">
            <p>网络:</p>
            <ul>
                <li>全球通</li>
                <li>双4G</li>
                <li>移动4G</li>
                <li>联通4G</li>
                <li>电信4G</li>
            </ul>
        </div>
        <div class="sec">
            <p>核心数:</p>
            <ul>
                <li>十核</li>
                <li>八核</li>
                <li>双四核</li>
                <li>四核</li>
                <li>双核及下</li>
            </ul>
        </div>
        <div class="sec">
            <p>特性:</p>
            <ul>
                <li>大屏幕</li>
                <li>双卡双待</li>
                <li>指纹识别</li>
                <li>千元机</li>
                <li>拍照神器</li>
            </ul>
        </div>
        <div class="sec7">
            <p>您已选择:</p>
            <ul>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <li>
                    <span></span>
                    <span>X</span>
                </li>
                <p id="clear">清除筛选条件</p>
            </ul>
        </div>
    </section>
</body>

</html>
<script>
    // $('li').click(function(){
    //     $(this).css({'background':'red','color':'#fff'})
    // })
    // $('.sec1').find('li').click(function(){
    //     $('.sec7').find('li').first().text($(this).text())
    // })
    $('.sec').each(function (index) {
        // console.log(index)
        $(this).find('li').click(function () {
            $(this).addClass('bgc').siblings().removeClass('bgc')
            $('.sec7').find('li').eq(index).show().find('span').first()
                .text($(this).text())
            // $('.sec7').find('li:visible')
            // $('#clear').show()
            var i = $('.sec7').find('li:visible').length
            if (i >= 2) {
                $('#clear').show()
            } else {
                $('#clear').hide()
            }
        })
        $('.sec7').find('li').click(function () {
            var m = $(this).index()
            $(this).hide()
            $('.sec').eq(m).find('li').attr('background', 'red').removeClass('bgc')
            var i = $('.sec7').find('li:visible').length
            if (i >= 2) {
                $('#clear').show()
            } else {
                $('#clear').hide()
            }
           
        })
         $('#clear').click(function () {
                $('.sec').find('li').attr('background','red').removeClass('bgc')
                $('.sec7').find('li:visible').hide();
                $(this).hide()
            })

        // $('.sec7').find('li').hover(function(){

        // },function(){

        // })
        // var yixz = $('.sec7').find('li:visible')
        // console.log(yixz.length)
    })
    // function clear (){
    //     var i = $('.sec7').find('li:visible')
    // }

</script>